<script setup lang="ts">
import { OButton, ODialog } from '@opensig/opendesign';
import { useCommonStore } from '@/stores/common';
import { storeToRefs } from 'pinia';
const commonStore = useCommonStore();
import { login } from '@/utils/login';

const { loginDialogVisible } = storeToRefs(commonStore);

const close = () => {
  commonStore.setLoginDialogVisible(false);
};
const change = (val: boolean) => {
  if (!val) {
    commonStore.setLoginDialogVisible(val);
  }
};
const toLogin = () => {
  login();
};
</script>

<template>
  <ODialog :visible="loginDialogVisible" @change="change" mainClass="login-dialog">
    <template #header>
      <div class="dlg-title">登录提示</div>
    </template>
    <div class="dlg-content">请登录后完成该操作</div>
    <template #footer>
      <div class="dlg-footer">
        <OButton color="primary" variant="solid" size="large" @click="toLogin">登录</OButton>
        <OButton color="primary" variant="outline" size="large" @click="close">关闭</OButton>
      </div>
    </template>
  </ODialog>
</template>

<style lang="scss">
.o-dialog {
  .login-dialog {
    padding: 32px;
    min-width: 450px;
    .dlg-title {
      font-weight: 500;
      @include h2;
      color: var(--o-color-info1);
    }
    .dlg-content {
      text-align: center;
      padding: var(--o-gap-1) 0 var(--o-gap-3);
    }
    .dlg-footer {
      display: flex;
      justify-content: center;
      column-gap: var(--o-gap-section-5);
      .o-btn {
        border-radius: var(--btn-height);
      }
    }
  }
}
</style>
